import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Form, Icon, Input, Button, message } from 'antd';
const FormItem = Form.Item;

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    /**
     *  表单提交
     * @param values [object] 表单json
     * @memberof Login
     */
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                this.props.dispatch({
                    type:'login/login',
                    payload: values
                })
            }
        });
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.data.code === 200) {
            message.success(nextProps.data.msg);
            this.props.dispatch(routerRedux.push('/ready'));
        } else if (nextProps.data.code === 500) {
            this.stopLoding();
            message.error(nextProps.data.msg);
        } else if (nextProps.data.code === 304) {
            this.stopLoding();
            message.error(nextProps.data.msg);
        }
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSubmit} className="login-form" style={{ textAlign: 'center', width: 300, margin: '100px auto', border:'1px solid #1890ff',borderRadius:10,padding:10}}>
                <FormItem>
                    {getFieldDecorator('userName', {
                        rules: [{ required: true, message: 'Please input your username!' }],
                    })(
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                    )}
                </FormItem>
                <FormItem>
                    {getFieldDecorator('password', {
                        rules: [{ required: true, message: 'Please input your Password!' }],
                    })(
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                    )}
                </FormItem>
                <FormItem>
                    <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
                </FormItem>
            </Form>
        );
    }
}

Login = Form.create()(Login);

function mapStateToProps(state) {
    const data = state.login.data;
    return { data };
}
export default connect(mapStateToProps)(Login);
